<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<TITLE>论坛--注册</TITLE>
	<Link rel="stylesheet" type="text/css" href="style/style.css"/>
	<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
	<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
	<link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
	<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
	<script src="js/bbs.js"></script>
	<style>
		.dipt{ text-align: left}
		.dipt>input{width: 100%}
	</style>
</HEAD>
<BODY>
<div id="app">
	<bbs>
		<div>
		<!--      导航        -->
		<DIV style="width: 100%">
			&gt;&gt;<B><a href="index.html">论坛首页</a></B>
		</DIV>
		<!--      用户注册表单        -->
		<DIV  class="t" style="MARGIN-TOP: 15px" align="center">
			<FORM name="regForm" action="" method="post" style="margin-top: 10px; padding: 10px">
				<div style="display: grid;grid-template-columns: 100px 300px auto;gap: 10px;width: 700px; text-align: left">
					<label for="">用户名</label>
					<div class="dipt">
						<INPUT class="input" tabIndex="1" type="text" maxLength="20" size="35" v-model="uname">
						<span style="color: red">{{unameError}}</span>
					</div>
					<div style="grid-row: 1 / 6; grid-column: 3 / 3;
						display: flex; justify-content: center">
						<el-avatar :size="150" :src="head" shape="square"></el-avatar>
					</div>

					<label for="">密　码</label>
					<div class="dipt">
						<INPUT class="input" tabIndex="2" type="password" maxLength="20" size="40" v-model="upass">
						<span style="color: red">{{upassError}}</span>
					</div>

					<label for="">重复密码</label>
					<div class="dipt">
						<INPUT class="input" tabIndex="3" type="password" maxLength="20" size="40" v-model="upass1">
						<span style="color: red">{{upass1Error}}</span>
					</div>

					<label for="">性别</label>
					<div style="text-align: left">
						女<input type="radio" name="gender" value="1" v-model="gender">
						男<input type="radio" name="gender" value="2" v-model="gender" checked="checked" />
					</div>

					<label for="">请选择头像</label>
					<div class="file-upload">
						<el-input placeholder="粘贴图片地址" v-model="head">
							<el-upload slot="append"
									   action="user/upload"
									   :on-success="handleAvatarSuccess"
									   :before-upload="beforeAvatarUpload"
									   :show-file-list="false"
										name="head">
								<el-button icon="el-icon-upload2"></el-button>
							</el-upload>
						</el-input>
						<span style="color: red">{{headError}}</span><br>
						(优先使用文件中的图片)
					</div>
				</div>
				<img src="image/head/1.gif"/><input type="radio" name="head" value="image/head/1.gif" v-model="head">
				<img src="image/head/2.gif"/><input type="radio" name="head" value="image/head/2.gif" v-model="head">
				<img src="image/head/3.gif"/><input type="radio" name="head" value="image/head/3.gif" v-model="head">
				<img src="image/head/4.gif"/><input type="radio" name="head" value="image/head/4.gif" v-model="head">
				<img src="image/head/5.gif"/><input type="radio" name="head" value="image/head/5.gif" v-model="head">
				<BR/>
				<img src="image/head/6.gif"/><input type="radio" name="head" value="6.gif" v-model="head">
				<img src="image/head/7.gif"/><input type="radio" name="head" value="7.gif" v-model="head">
				<img src="image/head/8.gif"/><input type="radio" name="head" value="8.gif" v-model="head">
				<img src="image/head/9.gif"/><input type="radio" name="head" value="9.gif" v-model="head">
				<img src="image/head/10.gif"/><input type="radio" name="head" value="10.gif" v-model="head">
				<BR/>
				<img src="image/head/11.gif"/><input type="radio" name="head" value="11.gif" v-model="head">
				<img src="image/head/12.gif"/><input type="radio" name="head" value="12.gif" v-model="head">
				<img src="image/head/13.gif"/><input type="radio" name="head" value="13.gif" v-model="head">
				<img src="image/head/14.gif"/><input type="radio" name="head" value="14.gif" v-model="head">
				<img src="image/head/15.gif"/><input type="radio" name="head" value="15.gif" v-model="head">
				<br/>
				<INPUT class="btn" tabIndex="4" type="submit" value="注 册" @click.prevent="reg">
			</FORM>
		</DIV>
		</div>
	</bbs>
</div>
<script>
	var v = new Vue({
		el : "#app",
		data : {
			uname:"",
			upass:"",
			upass1:"",
			unameError:"",
			upassError:"",
			upass1Error:"",
			gender: '2',
			head: 'image/head/1.gif',
			headError:"",

		},
		created(){

		},
		methods : {
			handleAvatarSuccess(res,file){
				//el-upload 返回的 res.data => axios res.data.data
				//res.data => webPath
				this.head = res.data;
			},
			beforeAvatarUpload(file){
				const isJPG = file.type.startsWith('image/');
				const isLt2M = file.size / 1024 / 1024 < 2;

				if(!isJPG){
					this.$message.error('上传头像图片只能是图片格式！');
				}
				if(!isLt2M){
					this.$message.error('上传头像图片大小不能超过 2MB！');
				}
				return isJPG && isLt2M;
			},
			reg(){
				let p = new URLSearchParams();
				p.append("uname", this.uname);
				p.append("upass", this.upass);
				p.append("upass1", this.upass1);
				p.append("gender", this.gender);
				p.append("head", this.head);
				axios.post("user/reg",p).then(res=>{
					// 清空报错信息
					let names = ["uname","upass","upass1","head"];
					names.forEach(name=>{
						this[name + 'Error'] = "";
					})

					if(res.data.code == 1){
						this.$alert(res.data.msg, '系统提示', {
							confirmButtonText: '确定',
							callback: action => {
								location.href="login.html";
							}
						});
					} else {
						res.data.data.forEach(err=>{
							names.forEach(name=>{
								if(name == err.field){
									this[name + 'Error'] += err.defaultMessage + "; ";
								}
							})
						});
					}
				})
			}
		},
		watch: {
			'head': function(head) {
				this.head = head;
			}
		}
	})
</script>
<!--      声明        -->
<BR>
<CENTER class="gray">源辰信息</CENTER>
</BODY>
</HTML>
